<!-- 生产质量监控 -->
<template>
    <div class="qualityMonitor">
        <el-row :gutter="20">
            <el-col :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
                <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
            </el-col>
            <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
                <div>
                    <el-row>
                        <el-form :inline="true" :model="queryParams" size="mini" style="margin-bottom: 10px;">
                            <el-col :span="24">
                                <el-button style="margin-right: 6px" size="mini"
                                    :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle
                                    @click="showLeft(show)"></el-button>
                                <el-form-item label="拌合楼">
                                    <el-select style="width: 120px" v-model="queryParams.stationCode" clearable size="mini"
                                        placeholder="请选择拌合楼">
                                        <el-option v-for="item in cementListData" :key="item.id" :label="item.name"
                                            :value="item.code"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="级配类型">
                                    <el-select style="width: 120px" v-model="queryParams.matchType" clearable size="mini"
                                        placeholder="级配类型">
                                        <el-option v-for="item in matchTypeList" :key="item.id" :label="item.type"
                                            :value="item.type"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="生产配比">
                                    <el-input style="width: 120px" size="mini" v-model="matchCode" clearable
                                        placeholder="生产配比"></el-input>
                                    <!-- <el-select style="width: 120px" v-model="queryParams.matchCode" clearable size="mini" placeholder="请选择">
                        <el-option v-for="item in matchCodeList" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select> -->
                                </el-form-item>
                                <el-form-item label="日期">
                                    <deatetime ref="deatetime" v-model="queryParams.timeRange">
                                    </deatetime>
                                </el-form-item>
                                <el-form-item label="报警类型">
                                    <el-select style="width: 120px" size="mini" v-model="queryParams.alarmType" filterable
                                        clearable :popper-append-to-body="false">
                                        <el-option label="温度" value="temperature"></el-option>
                                        <el-option label="油石比" value="asphaltAggregateRatio"></el-option>
                                        <el-option label="级配" value="sieve"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button icon="el-icon-search" type="primary" @click="handleQuery()">查询</el-button>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <div class="chartBox">
                                <div :hidden="!emptyChart" class="chartEmpty">
                                    <i class="el-icon-picture-outline"></i>
                                    <div>暂无数据</div>
                                </div>
                                <div id="alarmCountChart" style="width: 100%;height: 270px;transform-origin:0 0"></div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="chartBox">
                                <div :hidden="!emptyChart" class="chartEmpty">
                                    <i class="el-icon-picture-outline"></i>
                                    <div>暂无数据</div>
                                </div>
                                <div id="alarmTypeChart" style="width: 100%;height: 270px;transform-origin:0 0"></div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-table :data="dataList" border size="mini" highlight-current-row stripe>
                        <el-table-column prop="dischargeTime" label="时间" align="center" width="160px"></el-table-column>
                        <el-table-column prop="matchCode" label="配方编号" align="center" width="120px"></el-table-column>
                        <el-table-column label="级配曲线" align="center" width="100px">
                            <template slot-scope="scope">
                                <el-link class="link" @click="showLinechar(scope.row)">查看</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="asphaltAggregateRatio" label="油石比" align="center" width="100px">
                            <template slot-scope="scope">
                                <el-tag size="mini" type="success" v-if="0 == scope.row.asphaltAggregateRatio">合格</el-tag>
                                <el-tag size="mini" type="danger" v-else>超标</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sieve" label="级配" align="center" width="100px">
                            <template slot-scope="scope">
                                <el-tag size="mini" type="success" v-if="0 == scope.row.sieve">合格</el-tag>
                                <el-tag size="mini" type="danger" v-else>超标</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="temperature" label="温度" align="center" width="100px">
                            <template slot-scope="scope">
                                <el-tag size="mini" type="success" v-if="0 == scope.row.temperature">合格</el-tag>
                                <el-tag size="mini" type="danger" v-else>超标</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="state" label="状态" align="center" width="100px">
                            <template slot-scope="scope">
                                <el-tag size="mini" type="success" v-if="1 == scope.row.state">已处理</el-tag>
                                <el-tag size="mini" type="danger" v-else>未处理</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="details" label="报警信息" align="center"
                            :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column label="处理方案" align="center" width="120px">
                            <template slot-scope="scope">
                                <el-link type="primary" @click="showEdit(scope.row.id)">填报处理方案</el-link>
                                <!-- v-if="$hasPermission('api:asphaltalarm:handler')" -->
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination class="fenye" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                    <EditMonitor ref="edit" @success="handleQuery()"></EditMonitor>
                    <LineChar ref="lineChar"></LineChar>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import {
    sysStationList,// 沥青拌合楼
    getInitMatchCode,// 配方编号
    asphaltMatchTypeList,//级配类型
    getLatestData,
    asphaltAlarmPage,//列表
    getCount
} from "@/api/bitumenMixingStation/productionQuality/qualityMonitor";
import deatetime from "@/components/Datetime";
import EditMonitor from './editMonitor.vue';
import LineChar from './line-char.vue'
import workSiteLeft from "@/views/components/workSiteLeft";

export default {
    name: "qualityMonitor", //生产质量监控 
    data() {
        return {
            show: true,
            rowObj: {
                T1: 3,
                T2: 24,
                T3: 21,
                T4: 24,
                F1: 0,
                F2: 0,
                F3: 24,
                F4: 24,
            },
            emptyChart: false,
            matchCode: '',
            // chartLoading: true,
            submitting: true,
            visible: false,
            dataList: [],
            loading: false,//表格加载
            cementListData: [],//拌合楼下拉列表
            matchTypeList: [],//级配类型
            matchCodeList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                stationCode: undefined,
                matchType: undefined,
                matchCode: undefined,
                timeRange: [undefined, undefined],
                alarmType: undefined
            },
            searchParams:{},
            total: 0,
            chartLoading: true,
            emptyChart: false,
            alarmCountChart: null,
            alarmTypeChart: null,
            normalColor: '#4ccb72',
            totalColor: '#409eff',
            alarmColor: '#f3637c',
            sievingColor: '#44ccf9',
            temperatureColor: '#92dd22',
            asphaltAggregateRatioColor: '#409eff'
        };
    },
    filters: {
        showMatchType(val) {
            if (val) {
                return val
            }
            return '全部'
        }
    },
    components: {
        deatetime,
        EditMonitor,
        LineChar,
        workSiteLeft

    },

    created() {
        this.getCementList();
        this.getAsphaltMatchTypeList()
        this.getInitMatchCodeData()
        this.init();
        this.getList();

    },
    methods: {
        showLeft(show) {
            this.show = !show;
        },
        queryVal(val) {
            this.queryParams.id = val.id;
            this.searchParams.id = val.id
            this.handleQuery();
        },
        async init() {
            await getLatestData().then((rs) => {
                if (!!rs.data) {
                    this.queryParams = {
                        stationCode: rs.data.stationCode,
                        matchType: rs.data.matchType,
                        matchCode: rs.data.matchCode
                    };

                }
            });
        },

        getList() {
            this.loading = true;
            asphaltAlarmPage(this.queryParams).then((res) => {
                this.dataList = res.rows;
                this.total = res.total;
                this.loading = false;
            });
            this.onSearchChart();

        },
        getSearchParams() {
            const params = {};
            for (const key in this.queryParams) {
                if (key === "time") {
                    const time = this.queryParams[key];
                    if (time && time.length === 2) {
                        params.startTime = time[0];
                        params.endTime = time[1];
                    }
                } else {
                    params[key] = this.queryParams[key];
                }
            }
            return params;
        },
        /**
          * 查询图表数据
          */
        onSearchChart() {
            this.chartLoading = true;
            getCount(this.searchParams)
                .then((res) => {
                    this.createChart(res.data);
                    this.chartLoading = false;
                })
                .catch(() => {
                    this.createChart(null);
                    this.chartLoading = false;
                });
        },

        /**
         * 创建图表
         */
        createChart(data) {
            this.emptyChart = false;
            if (null == this.alarmCountChart) {
                this.alarmCountChart = echarts.init(document.getElementById('alarmCountChart'));
            } else {
                this.alarmCountChart.clear();
            }
            if (null == this.alarmTypeChart) {
                this.alarmTypeChart = echarts.init(document.getElementById('alarmTypeChart'));
            } else {
                this.alarmTypeChart.clear();
            }

            let total = 0; // 批次总数
            let normal = 0; // 正常批次
            let alarm = 0; // 预警批次
            let asphaltAggregateRatio = 0; // 油石比预警
            let sieve = 0; // 筛孔预警
            let temperature = 0; // 温度预警
            if (!!data) {
                total = !!data.total ? data.total : 0;
                alarm = !!data.alarm ? data.alarm : 0;
                asphaltAggregateRatio = !!data.asphaltAggregateRatio ? data.asphaltAggregateRatio : 0;
                sieve = !!data.sieve ? data.sieve : 0;
                temperature = !!data.temperature ? data.temperature : 0;
            }

            // 处理显示数据
            let countData = [];
            let typeData = [];
            if (0 == total) {
                this.emptyChart = true;
            } else {
                normal = total - alarm;
                countData = [
                    {
                        value: normal,
                        name: '合格',
                        itemStyle: {
                            normal: {
                                color: this.normalColor
                            }
                        }
                    },
                    {
                        value: alarm,
                        name: '不合格',
                        itemStyle: {
                            normal: {
                                color: this.alarmColor
                            }
                        }
                    }
                ];

                typeData = [
                    {
                        value: sieve,
                        name: '级配',
                        itemStyle: {
                            normal: {
                                color: this.sievingColor
                            }
                        }
                    },
                    {
                        value: temperature,
                        name: '温度',
                        itemStyle: {
                            normal: {
                                color: this.temperatureColor
                            }
                        }
                    },
                    {
                        value: asphaltAggregateRatio,
                        name: '油石比',
                        itemStyle: {
                            normal: {
                                color: this.asphaltAggregateRatioColor
                            }
                        }
                    }
                ];
            }

            // 计算正常批次数量
            this.alarmCountChart.setOption({
                title: {
                    text: '预警数量统计'
                },
                toolbox: {
                    right: 100,
                    feature: {
                        saveAsImage: {}
                    }
                },
                legend: {
                    data: ['合格', '不合格'],
                    orient: 'vertical',
                    left: 'left',
                    top: 40,
                    formatter: (val) => {
                        let num = 0;
                        if ('合格' == val) {
                            num = normal;
                        }
                        if ('不合格' == val) {
                            num = alarm;
                        }
                        return val + ':' + num + '批次';
                    }
                },
                series: [
                    {
                        name: '预警数量统计',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        label: {
                            formatter: '{b}:{d}%'
                        },
                        data: countData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });

            this.alarmTypeChart.setOption({
                title: {
                    text: '预警种类统计'
                },
                toolbox: {
                    right: 100,
                    feature: {
                        saveAsImage: {}
                    }
                },
                legend: {
                    data: ['油石比', '温度', '级配'],
                    orient: 'vertical',
                    left: 'left',
                    top: 40,
                    formatter: (val) => {
                        let num = 0;
                        if ('油石比' == val) {
                            num = asphaltAggregateRatio;
                        }
                        if ('温度' == val) {
                            num = temperature;
                        }
                        if ('级配' == val) {
                            num = sieve;
                        }
                        return val + ':' + num + '批次';
                    }
                },
                series: [
                    {
                        name: '预警种类统计',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        label: {
                            formatter: '{b}:{d}%'
                        },
                        data: typeData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        },

        /**
          * 显示编辑界面
          * @param {*} id 数据主键
          */
        showEdit(id) {
            this.$refs.edit.init(id);
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams = this.getSearchParams();
            this.queryParams.pageNum = 1;
            this.getList();
            this.onSearchChart();

        },
        handleTabs(index) {
            this.activeName = index
            this.getList()
        },
        // 配方编号
        getInitMatchCodeData() {
            getInitMatchCode().then((res) => {
                this.matchCodeList = res.data
            })
        },
        // 查询拌合楼下拉列表
        getCementList() {
            sysStationList({
                type: 'asphalt'
            }).then((res) => {
                this.cementListData = res.data || [];
            });
        },
        // 级配类型
        getAsphaltMatchTypeList() {
            asphaltMatchTypeList().then((res) => {
                this.matchTypeList = res.data;
            });
        },
        /**
    * 显示级配曲线
    */
        showLinechar(obj) {
            this.$refs.lineChar.open(obj.id);
        }
    },

};
</script>
<style scoped lang="scss">
.qualityMonitor {
    padding: 16px;

    .tabsBox {
        display: flex;
        width: 100%;
        border-bottom: 2px solid #dfe4ed;

        .tabItem {
            cursor: pointer;
            padding: 0 20px;
            height: 40px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            line-height: 40px;
            display: inline-block;
            list-style: none;
            font-size: 14px;
            font-weight: 500;
            color: #303133;
        }

        .tabItemActive {
            transition: opacity 0.5s ease; // 设置过渡持续时间、速度曲线等参数
            color: #00508A;
            border-bottom: 2px solid #00508A;
        }
    }
}
</style>






